<template>
<div>
  <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               width='30%'
               :option="shopManageOption"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @on-load="getDataList">

      <template slot-scope="scope"
                slot="shopStatus">
        <el-tag v-if="scope.row.shopStatus == 0"
                size="small"
                type="info">停业中</el-tag>
        <el-tag v-else-if="scope.row.shopStatus == 1"
                size="small"
                type="success">营业中</el-tag>
        <el-tag v-else-if="scope.row.shopStatus == -1"
                size="small"
                type="warning">未开通</el-tag>
        <el-tag v-else
                size="small"
                type="warning">状态异常</el-tag>
      </template>

      <template slot-scope="scope"
                slot="menu">           
        <el-button type="sucess"
                   icon="el-icon-edit"
                   size="small"
                   @click.stop="addOrUpdateHandle([scope.row,'update'])">详情/编辑</el-button>

        <!-- <el-button type="danger"
                   icon="el-icon-delete"
                   size="small"
                   @click.stop="deleteHandle(scope.row.shopId)">删除</el-button> -->

      </template>
    </avue-crud>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-bind:shopInfo="shopInfo"
                v-if="addOrUpdateVisible"
                ref="addOrUpdate"
                @refreshDataList="getDataList"></add-or-update>

</div>
</template>

<script>
import { shopManageOption } from '@/crud/shop/shopManage.js'
import AddOrUpdate from './shopDetail-add-or-update'
export default {
    data() {
      return {
        dataList: [],
        searchParams: {},
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        shopManageOption: shopManageOption,
        addOrUpdateVisible :false,
        shopInfo:'',
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
      }
    },
    components:{
      AddOrUpdate
    },
    methods: {
      getDataList (page) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/shop/shopDetail/managePage'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign({
              shopStatus: this.searchParams.shopStatus,
              shopName: this.searchParams.shopName,
              current:page == null? this.page.currentPage : page.currentPage,
              size:page == null? this.page.pageSize : page.pageSize,
            },
            this.searchParams
            )
          )
        }).then(({ data }) => {
          this.dataList = data.records
          this.page.total = data.total
          this.page.currentPage = data.current
          this.dataListLoading = false
        }).catch((err) =>{
        })
      },

      searchChange (params,done) {
        // console.log(params);
        this.searchParams = params
        this.getDataList(this.page)
        done()
    },

      selectionChange (val) {
        this.dataListSelections = val
    },
    // 新增 / 修改
      addOrUpdateHandle (row) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(row)
        })
        this.getDataList()                            
      },
      
      //更改店铺审核状态为 审核通过
      changeShopState(id){
        this.$http({
          url: this.$http.adornUrl("/shop/shopDetail/shopStatus?shopId="+id+"&shopStatus="+1),
          method: 'put',
          }).then((res) => {
            console.log(res);  
            this.getDataList()                            
          })
      }
    },
    
}
</script>

<style>
.el-input {
  width: 100%;
}
</style>
